<template>
  <div id="userLoginView">
    <div class="form">
      <h2 style="margin-bottom: 16px; margin-top: 0">用户登录</h2>
      <a-form
        style="max-width: 480px; margin: 0 auto"
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
      >
        <a-form-item field="account" label="账号">
          <a-input v-model="form.account" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item field="password" tooltip="密码不少于 8 位" label="密码">
          <a-input-password v-model="form.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 120px">
            登录
          </a-button>
          <div style="margin-left: 30px">
            还没有账号? 点击 <a href="/register">注册</a>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
  <GlobalFooter />
</template>

<script setup lang="ts">
import { ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import GlobalFooter from "@/components/GlobalFooter.vue";
import { UserControllerService, UserLoginRequest } from "@/api";
import { useUserStore } from "@/stores";

/**
 * 表单信息
 */
const form = ref<UserLoginRequest>({});
const router = useRouter();
/**
 * 提交表单
 * @param data
 */
const handleSubmit = async () => {
  const res = await UserControllerService.userLoginUsingPost(form.value);
  // 登录成功，跳转到主页
  if (res.code === 0) {
    //保存token信息
    const userStore = useUserStore();
    userStore.token = res.data;
    //跳转
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error("登陆失败，" + res.message);
  }
};
</script>

<style scoped>
#userLoginView {
  text-align: center;
  min-height: calc(100vh - 17px);
  background: url(https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png);
  align-content: center;
}

.form {
  padding: 30px;
}
</style>
